<template>
  <div class="date" >
    <el-row>
      <div class="el-calendar__header">
        <div class="el-calendar__title">
          <span class="title">{{ calendarDate }}</span>
        </div>
        <div class="el-calendar__button-group">
          <div class="el-button-group">
            <button type="button" class="el-button el-button--plain el-button--mini" @click="weekPre"> <span>上一周</span></button>
            <button type="button" class="el-button el-button--plain el-button--mini" @click="goToday"> <span> 今天 </span></button>
            <button type="button" class="el-button el-button--plain el-button--mini" @click="weekNext"> <span>下一周</span></button>
          </div>
        </div>
      </div>
    </el-row>
    <el-row>
      <el-col >
        <div class="weeks">
          <!-- 日期 -->
          <ul class="days">
            <li
              class="date-item"
              @click="pick(day, index)"
              v-for="(day, index) in days"
              :key="index"
              :class="{selected: index == tabIndex}"
            >
              <!--本月-->
              <span v-if="day.getMonth()+1 != currentMonth" class="other-month item-wrapper">
                <p>{{day | getWeekFormat}}</p>
                <span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
              </span>

              <span v-else>
                <!--今天-->
                <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()"
                  class="today-item">
                  <p>今天</p>
                  <span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
                </span>
                <span class="item-wrapper" v-else>
                  <p>{{day | getWeekFormat}}</p>
                  <span class="hidden-sm-and-down">{{ day | dateFormat }}</span>
                </span>
              </span>
            </li>

            <li>
              <span>
                <el-date-picker
                  class="right-pick-btn"
                  style="width: 100%"
                  :clearable="false"
                  @change="pickDate"
                  v-model="newDate"
                  type="date"
                  placeholder="按日期查询"
                ></el-date-picker>
              </span>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="20" :offset="2" class="time-range">
        <span
          @click="pickTime(time, index)"
          v-for="(time, index) in times"
          :key="index"
          :class="{active:index == tabTimeIndex}"
        >{{time.label}}</span>
      </el-col>
    </el-row> -->
  </div>
</template>

<script>
/* eslint-disable */
import moment from "moment";
export default {
  props: {
    dateValue: {
      type: String,
      default: moment(new Date()).format("YYYY-MM-DD")
    },
    timeValue: {
      type: String,
      default: "00:00"
    }
  },
  data() {
    return {
      currentYear: 1970, // 年份
      currentMonth: 1, // 月份
      currentDay: 1, // 日期
      currentWeek: 1, // 星期
      days: [],
      value1: "",
      tabIndex: null,
      newDate: moment(new Date()).format("YYYY-MM-DD"),
      calendarDate: moment(new Date()).format("YYYY年MM月"),
      tabTimeIndex: 4,
      times: [
        { time: "00:00:00~06:00:00", label: "00:00~06:00" },
        { time: "06:00:00~12:00:00", label: "06:00~12:00" },
        { time: "12:00:00~18:00:00", label: "12:00~18:00" },
        { time: "18:00:00~24:00:00", label: "18:00~24:00" },
        { time: "00:00:00~24:00:00", label: "今日全部" }
      ]
    };
  },
  filters: {
    dateFormat(date) {
      return moment(date).format("MM-DD");
    },
    getWeekFormat(date) {
      const weeksObj = {
        1: "周一",
        2: "周二",
        3: "周三",
        4: "周四",
        5: "周五",
        6: "周六",
        7: "周日"
      };
      let weekNumber = moment(date).isoWeekday();
      return weeksObj[weekNumber];
    }
  },

  mounted() {
    const index = _.findIndex(this.days, function(o) {
      // console.log('o: ', o.getDate());
      // console.log('new Date().getDate(): ', new Date().getDate());
      return o.getDate() === new Date().getDate();
    });
    this.tabIndex = index;
  },

  created() {
    this.initData(null);
  },
  watch: {
    newDate(val) {
       this.calendarDate = moment(val).format("YYYY年MM月");
    }
  },
  methods: {
    formatDate(year, month, day) {
      const y = year;
      let m = month;
      if (m < 10) m = `0${m}`;
      let d = day;
      if (d < 10) d = `0${d}`;
      return `${y}-${m}-${d}`;
    },
    pickDate(date) {
      let that = this;
      that.newDate = moment(date).format("YYYY-MM-DD");
      that.$emit("dateValue", that.newDate);
      that.initData(that.newDate);
      const index = _.findIndex(that.days, function(o) {
        return o.getDate() === new Date(that.newDate).getDate();
      });
      // console.log("index: ", index);
      this.tabIndex = index;
    },
    initData(cur) {
      let date = "";
      if (cur) {
        date = new Date(cur);
      } else {
        date = new Date();
      }
      this.currentDay = date.getDate(); // 今日日期 几号
      this.currentYear = date.getFullYear(); // 当前年份
      this.currentMonth = date.getMonth() + 1; // 当前月份
      this.currentWeek = date.getDay(); // 1...6,0  // 星期几
      if (this.currentWeek === 0) {
        this.currentWeek = 7;
      }
      const str = this.formatDate(
        this.currentYear,
        this.currentMonth,
        this.currentDay
      ); // 今日日期 年-月-日
      this.days.length = 0;
      // 今天是周日，放在第一行第7个位置，前面6个 这里默认显示一周，如果需要显示一个月，则第二个循环为 i<= 35- this.currentWeek
      /* eslint-disabled */
      // 今天
      for (let i = this.currentWeek - 1; i >= 0; i -= 1) {
        const d = new Date(str);
        d.setDate(d.getDate() - i);
        // console.log(y:" + d.getDate())
        // console.log('d: ', d);
        this.days.push(d);
      }
      // 这个星期
      for (let i = 1; i <= 7 - this.currentWeek; i += 1) {
        const d = new Date(str);
        d.setDate(d.getDate() + i);
        this.days.push(d);
        // console.log('d1: ', d);
      }
    },

    // 上个星期
    weekPre() {
      const d = this.days[0]; // 如果当期日期是7号或者小于7号
      d.setDate(d.getDate() - 7);
      this.initData(d);
    },

    // 下个星期
    weekNext() {
      const d = this.days[6]; // 如果当期日期是7号或者小于7号
      d.setDate(d.getDate() + 7);
      this.initData(d);
    },

    // 上一個月  传入当前年份和月份
    pickPre(year, month) {
      const d = new Date(this.formatDate(year, month, 1));
      d.setDate(0);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },

    // 下一個月  传入当前年份和月份
    pickNext(year, month) {
      const d = new Date(this.formatDate(year, month, 1));
      d.setDate(35);
      this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
    },
    // 今天
    goToday() {
        const today = new Date(); // 获取当前日期
        this.newDate = moment(today).format("YYYY-MM-DD"); // 更新选中日期为今天
        this.initData(this.newDate); // 重新初始化本周数据
        // 高亮选中今天
        const index = this.days.findIndex(day =>
          day.getDate() === today.getDate() &&
          day.getMonth() === today.getMonth() &&
        day.getFullYear() === today.getFullYear()
      );
      this.tabIndex = index; // 选中今天所在的列表项
      this.$emit("dateValue", this.newDate); // 同步父组件日期
    },
    // 当前选择日期
    pick(date, index) {
      this.newDate = moment(date).format("YYYY-MM-DD");
      this.$emit("dateValue", this.newDate);
      // console.log("index: ", index);
      this.tabIndex = index;
      // alert(
      //   this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
      // );
    },
    pickTime(time, index) {
      let timeArr = [];
      timeArr.push(_.split(time.time, "~"));
      // console.log("timeArr: ", timeArr);
      this.$emit("timeValue", _.join(timeArr), "");
      // console.log("index: ", index);
      this.tabTimeIndex = index;
      // alert(
      //   this.formatDate(date.getFullYear(), date.getMonth() + 1, date.getDate())
      // );
    }
  }
};
</script>
<style lang="less" scoped>
@media screen and (max-width: 1300px) {
  .days {
    li {
      padding: 5px !important;
    }
  }
}
.title{
  font-size: 16px;
  font-weight: 500;
}
.today-item {
  cursor: pointer;
  line-height: 100%;
  width: 100%;
  text-align: center;
  display: inline-block;
}

.selected {
  box-sizing: border-box;
  color: #fff !important;
  background: #409eff !important;
  border:1px solid #409eff !important;
}

.item-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  text-align: center;
}

.prev-btn,
.next-btn {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  min-width: 80px;

  .fa-icon {
    font-size: 18px;
  }
}

.right-pick-btn {
  width: 140px !important;
}

.date {
  font-size: 14px;
  padding-bottom: 20px;

  .time-range {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;

    span {
      cursor: pointer;
      padding-bottom: 5px;
      border-bottom: 3px solid #fff;

      &:hover {
        border-bottom: 3px solid rgb(151, 198, 245);
      }

      &:active {
        border-bottom: 3px solid rgb(151, 198, 245);
      }
    }

    .active {
      border-bottom: 3px solid #409eff;
    }
  }

  .weeks{
    margin-top:15px;
  }
  .days {
    display: flex;
    width: 100%;
    padding: 0;
    margin: 0;

    li {
      cursor: pointer;
      padding: 5px 10px;
      border: 1px solid #ccc;
      border-right: none;
      list-style: none;
      flex: 1 1 auto;
      min-width: 0;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;

      .other-month {
        // color: #c0c4cc;
      }

      &:last-child {
        border-right: 1px solid #ccc;
        min-width: 160px; /* 确保日期选择器有足够宽度 */
      }
    }

    .is-today {
      box-sizing: border-box;
      color: #fff !important;
      background: #F56C6C !important;
    }

    .date-item {
      &:hover {
        background: #dff0d8;
      }

      &:active {
        background: #dff0d8;
      }
    }
  }
}
</style>
